<template>
  <div>
      <div class="out">

        <div 
        class="updown"
        :style="{background:'url('+playlistInfo.coverImgUrl+')'}">
        </div>
        
        <div class="uppic">
            <div>
                <img :src="playlistInfo.coverImgUrl" 
                width="94px" height="94px ">
                <span class="words">{{words}}</span>
            </div>
        </div>
    </div>
    <div class="songs">

    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            playlistInfo: {},
            words: '',
            songs: [],
        }
},
created(){
    this.getPlaylistDetail();
    this.getSongs();
},
methods: {
    getPlaylistDetail(){
        let id = this.$route.params.id;
        this.$http('/playlist/detail', {params: {id}})
        .then(res => {
            console.log(res.data);
            this.playlistInfo = res.data.playlist;
            this.words = res.data.playlist.name;
        })
        .catch(err => {
            console.log(err);
        })
    },
    getSongs(){
      this.$http('/playlist/detail')
      .then(res => {
        console.log(res.data);
        // this.words = res.playlist.creator.name;
      })
      .catch(err => {
        console.log(err);
      })
    }
}
}
</script>

<style>
.out {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
}
.updown {
  width: 100%;
  height: 180px;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: 50%; */
  filter: blur(20px);
  transform: scale(1.5);
}
.smallpic{
  display: inline-block;
}
.uppic {
  top: 25%;
  bottom: 0;
  z-index: 2;
  padding-left: 20px;
  box-sizing: border-box;
  position: relative;
}
.words{
  color: white;
  font-size: 18px;
}
</style>